<template>
	<view>
		<view class="boxs">
			<view v-for="(item,index) in storeList" :key="index" >
				<view :class="storeIndex == index?'selectContent':'content'" @click="selectStoreFun(item,index)">
					<image class="Image" :src="item.otherConfigJson.logo" mode="aspectFill"></image>
					<view class="text">
						<view class="businessName">
							店名:{{item.businessName}}
						</view>
						<view class="businessDesc">
							{{item.otherConfigJson.businessDesc}}
						</view>
						<view class="businessDesc">
							地址:{{item.otherConfigJson.address}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			storeIndex: {
				type: Number,
				default: 0
			},
			storeList: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		methods:{
			selectStoreFun(item,index){
				this.$emit('selectStoreFun',item,index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.boxs{
		display: grid;
		grid-template-columns: repeat(1, 1fr);  
		gap: 15rpx;
		width: 100%;
		.selectContent{
			border: 1px solid #ccc;
			padding: 20rpx;
			display: flex;
			width: 94%;
			border-radius: 8px;
		}
		.content{
			border: 1px solid #eee;
			padding: 20rpx;
			display: flex;
			width: 94%;
			border-radius: 8px;
		}
		.Image{
			height: 108rpx;width: 108rpx;border-radius: 8px;
		}
		.text{
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			margin-left: 20rpx;
			.businessName{
				color: rgba(0, 0, 0, .9);
				font-weight: 500;
			}
			.businessDesc{
				color: rgba(0, 0, 0, .6);
				font-size: 22rpx;
			}
		}
	}
</style>